<script context="module" lang="ts">
	export const prerender = true;
</script>

<script lang="ts">
	// import Counter from '$lib/Counter.svelte';
	// import Test from '$lib/components/Test.svelte'

	// import { browser } from '$app/env';
	// if (browser) {
	// 	// client-only code here
	// 	console.log('client-only code here', location)
	// }
	// import _ from 'lodash';

	// export let chunk = _.chunk(['a', 'b', 'c', 'd'], 2);

	import { onMount } from "svelte";
  import Swiper from "swiper";
  import SwiperCore, {
    Autoplay,
    Pagination,
    Navigation
  } from "swiper"; /* importing swiper/core throws error in build */

  import "swiper/swiper.min.css";
  import "swiper/components/lazy/lazy.min.css";
  import "swiper/components/pagination/pagination.min.css";
  import "swiper/components/navigation/navigation.min.css";

  let container, swiper, pagination;
	let culture_container, culture_swiper, culture_next, culture_prev;
	let history_container, history_swiper, history_next, history_prev, history_pagination;
  onMount(() => {
    SwiperCore.use([Autoplay, Pagination, Navigation]);
    swiper = new Swiper(container, {
			lazy: true,
    	speed: 900,
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      autoplay: {
        delay: 10000,
        disableOnInteraction: false
      },
			pagination: {
				el: pagination,
				clickable: true
			}
    });
		culture_swiper = new Swiper(culture_container, {
    	speed: 900,
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      autoplay: {
        delay: 10000,
        disableOnInteraction: false
      },
      navigation: {
        nextEl: culture_next,
        prevEl: culture_prev
      },
    });
		history_swiper = new Swiper(history_container, {
    	speed: 900,
      slidesPerView: 1,
      loop: true,
      // autoplay: {
      //   delay: 10000,
      //   disableOnInteraction: false
      // },
      navigation: {
        nextEl: history_next,
        prevEl: history_prev
      },
			pagination: {
				el: history_pagination,
				clickable: true,
				renderBullet: function (index, className) {
					return '<span class="' + className + '">' + (index + 1) + "</span>";
				},
			}
    });
    return () => {
      swiper.destroy();
      culture_swiper.destroy();
      history_swiper.destroy();
    };
  });

  const items = [
    {
      name: "Leonardo",
      age: 26,
      location: "Italy",
			img: 'https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/0-390b5def140dc370854c98b8e82ad394.png',
			icon: ''
    },
    {
      name: "Maria",
      age: 27,
      location: "Brazil",
			img: 'https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/1-b4afd269ffb0ba19bd1dd33e3ed5cec3.png'
    },
    {
      name: "Oliver",
      age: 28,
      location: "United States",
			img: 'https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/0-390b5def140dc370854c98b8e82ad394.png'
    },
    {
      name: "Margarida",
      age: 29,
      location: "Portugal",
			img: 'https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/3-9ea22bd593086f432ab75ee6c95c37de.png'
    }
  ];

	const partnerData = [
		{
			name: '阿里云'
		},
		{
			name: '腾讯云'
		},
		{
			name: '腾讯云'
		},
		{
			name: '阿里云'
		},
	]
</script>

<svelte:head>
	<title>字节跳动</title>
</svelte:head>

<section>
	<!-- 网站 -->
	<div class="shadow-xl slide">
		<div class="swiper-container slide-warp" bind:this={container}>
		 	<div class="swiper-wrapper">
			 	{#each items as item}
				 	<div class="swiper-slide">
						<!-- <strong>{item.name}</strong> ({item.age})
						from {item.location} -->
						<img src="{item.img}" alt="{item.name}" class="swiper-slide__img">
				 	</div>
			 	{/each}
		 	</div>
			<div class="swiper-pagination swiper-slide__page" bind:this={pagination}></div>
			<!-- <div class="swiper-button-next" bind:this={next}></div>
			<div class="swiper-button-prev" bind:this={prev}></div> -->
	 	</div>
	</div>
	<div class="culture section-warp">
		<div class="culture-info">
			<p class="section-title">企业文化</p>
			<div class="section-desc">
				字节范是字节跳动企业文化的重要组成部分，是我们共同认可的行为准则。
			</div>
		</div>
		<div class="culture-slide">
			<div class="swiper-container culture-slide-warp" bind:this={culture_container}>
				<div class="swiper-wrapper">
					{#each items as item}
						<div class="swiper-slide">
							<!-- <strong>{item.name}</strong> ({item.age})
							from {item.location} -->
							<img src="{item.img}" alt="{item.name}" class="swiper-slide__img">
							<div class="">
								<h2 class="culture-slide__tit">hello world {item.location}</h2>
								<ul class="culture-slide__desc">
									<li class="culture-slide__desc-item">敢当面表达真实想法</li>
									<li class="culture-slide__desc-item">能承认错误，不装不爱面子</li>
									<li class="culture-slide__desc-item">实事求是，暴露问题，反对“向上管理”</li>
									<li class="culture-slide__desc-item">准确、简洁、直接，有条理有重点</li>
								</ul>
							</div>
						</div>
					{/each}
				</div>
			 <div class="swiper-button-next" bind:this={culture_next}></div>
			 <div class="swiper-button-prev" bind:this={culture_prev}></div>
			</div>
		</div>
	</div>
	<div class="history section-warp">
		<p class="section-title">大事记</p>
		<div class="history-wrapper">
			<div class="swiper-container history-slide-warp" bind:this={history_container}>
				<div class="swiper-wrapper">
					{#each items as item}
						<div class="swiper-slide">
							<div class="history-cnt">
								<img src="{item.img}" alt="{item.name}" class="history-cnt__img">
								<div class="history-cnt__words">
									<p class="history-cnt__words-time">2020年1月</p>
									<p class="history-cnt__words-desc">字节跳动向中国红十字基金会捐赠2亿元，成立“中国红十字基金会字节跳动医务人员人道主义援助基金”</p>
								</div>
							</div>
						</div>
					{/each}
				</div>
			 <!-- <div class="swiper-button-next" bind:this={history_next}></div>
			 <div class="swiper-button-prev" bind:this={history_prev}></div> -->
			<div class="swiper-pagination history-swiper-slide__page" bind:this={history_pagination}></div>
			</div>
		</div>
	</div>
	<div class="partner section-warp">
		<p class="section-title">合作伙伴</p>
		<div class="partner-wrapper">
			{#each partnerData as item}
				<div class="partner-item">
					{item.name}
				</div>
			{/each}
		</div>
	</div>
	<div class="contact section-warp">
		<p class="section-title">联系我们</p>
		<div class="contact-wrapper">
			<div class="contact-item">
				<p class="contact-item__tit">媒体问询</p>
				<a href="Mailto:gongguan@bytedance.com" class="contact-item__email">gongguan@bytedance.com</a>
			</div>
			<div class="contact-item">
				<p class="contact-item__tit">招聘相关</p>
				<a href="Mailto:hr@bytedance.com" class="contact-item__email">hr@bytedance.com</a>
			</div><div class="contact-item">
				<p class="contact-item__tit">商务合作</p>
				<a href="Mailto:bd@bytedance.com" class="contact-item__email">bd@bytedance.com</a>
			</div>
		</div>
	</div>
</section>
<!-- <Test foo='fanfan' />
<section>
<h1>
	<div class="welcome">
		<picture>
			<source srcset="svelte-welcome.webp" type="image/webp" />
			<img src="svelte-welcome.png" alt="Welcome" />
		</picture>
	</div>

	to your new<br />SvelteKit APP231
</h1>

	<h2 class="tit">
		创建一个新的 svelte 的网站
	</h2>

	<a href="/about" sveltekit:prefetch class="p-16 m-10 border border-4 shadow-2xl rounded-3xl"> about </a>

	<h2 class="color-red">
		try editing <strong>src/routes/index.svelte</strong>
		{ chunk }
	</h2>
	<Counter /> -->
<style lang="scss">
	section {
		display: flex;
    flex-direction: column;
    justify-content: center;
	}
	.section {
		&-warp {
			position: relative;
			width: 100%;
			padding: 0 9vw;
			margin: 11vw auto 0;
		}
		&-title {
			position: absolute;
    	top: .2rem;
			font-size: .8rem;
    	line-height: .56rem;
			font-family: 'Gilroy-Bold',-apple-system,"Sofia Pro","Microsoft YaHei","Helvetica","Arial",sans-serif;
    	font-weight: 700;
		}
		&-desc {
			margin-top: 9vw;
    	flex: .9;
			font-size: .4rem;
		}
	}
	.slide {
		width: 100%;
    height: calc(51vw + 1.8rem);
    min-height: 5.5rem;
    max-height: 100vh;
    overflow-y: hidden;
	}
	.swiper-container {
		width: 100% !important;
		height: 100% ;
	}
	.swiper-slide {
		background: #fff;
		&__img {
			display: block;
			height: 100%;
			width: 100%;
		}
		&__page {
			bottom: 30px;
		}
	}
	.culture {
		display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
		flex-flow: row wrap;
		&-info {
			width: 30vw;
		}
		&-slide {
			.swiper-container {
				height: auto !important;
			}
			&__tit {
				margin-left: 2rem;
				margin-top: .4rem;
				margin-bottom: .36rem;
				font-size: .8rem;
				text-align: left;
				transform: scale(1) !important;
				color: #000;
			}
			&__desc {
				margin-left: 2rem;
				list-style: disc;
				&-item {
					font-size: .4rem;
					transform-origin: center;
					text-align: left;
					position: relative;
					margin-bottom: 0.24rem;
				}
			}
			.swiper-button-next,
			.swiper-button-prev {
				top: 62%;
			}
			width: 47.5vw;
			background-color: #fff;
			@apply text-center overflow-x-hidden overflow-y-auto mr-0 rounded-md;
		}
	}

	.contact-wrapper {
    display: flex;
    flex-flow: row wrap;
    margin: auto;
    margin-top: 1.8rem;
	}
	.contact-item {
		flex: 0 0 50%;
		margin-bottom: .9rem;
		&__tit {
			font-size: .5rem;
    	font-weight: bolder;
			margin-bottom: .2rem;
		}
		&__email {
			font-size: .4rem;
    	color: #3c8cff;
		}
	}

	.partner-wrapper {
    display: flex;
		justify-content: space-between;
    flex-flow: row wrap;
    margin: auto;
    margin-top: 1.8rem;
	}
	.partner-item {
		flex: 0 0 18%;
		margin: 1rem .8rem;
		font-size: .4rem;
		@apply border shadow-xl p-4 border-gray-400 rounded-sm text-center;
	}

	.history-wrapper {
    @apply mt-6;
	}
	.history-slide-warp {
		overflow: visible !important;
	}
	.history-cnt {
		display: flex !important;
    width: 60%;
    height: 5rem;
		margin: 0 auto;
    border-radius: .2rem;
    background-color: #fff;
		@apply shadow-xl;
		&__img {
			display: block;
			width: 6rem;
			height: 100%;
			object-fit: cover;
			border-top-left-radius: .2rem;
			border-bottom-left-radius: .2rem;
		}
		&__words {
			flex: 1;
			margin: .4rem .5rem 0 1rem;
			text-align: left;
			&-time {
				font-family: "Gilroy-Bold";
				font-weight: 500;
				font-size: .6rem;
			}
			&-desc {
				margin-top: .1rem;
    		font-size: .3rem;
			}
		}
	}
	

</style>
